<template>
     
    <div style="display: flex ; flex-direction: column; width: 100%;height: 100%;">
        <el-card>
        <div class="aTop" >
            <div style="display: flex;
            justify-content: center;">
                <h1>{{ title0 }}</h1>
            </div>
            
            <div style="display: flex; flex-direction: column;">
                <span style="font-size: 18px;">账号登录方式</span>
                <span style="font-size: 12px; margin-top:5px;">您可使用手机号、邮件地址登录未来蜂帐号</span>
            </div>
        </div>
       
            <div class="aMiddle">
            <div class="as1">
                <div class="aMiddleLeft">
                    <emailIconVue style="width: 30px; height: 30px;"></emailIconVue>
                </div>
                <div  class="aMiddleMiddle">
                    <div class="ss1">
                        <span>邮箱地址</span>
                    </div>
                    <div  class="ss2">
                        {{ email }}
                    </div>
                </div>
                <div  class="aMiddleRight">
                    <el-button type="primary" @click="emailChangeButton" style="width: 80px;">更改</el-button>
                </div>
            </div>
            
            <div class="as1">
                <div class="aMiddleLeft">
                    <phoneIconVue style="width: 30px; height: 30px;"></phoneIconVue>
                </div>
                <div  class="aMiddleMiddle">
                    <div class="ss1">
                        手机号
                    </div>
                    <div class="ss2">
                        <span style="color: red;" v-if="phone==''">
                            未绑定
                        </span>
                        <span v-else>
                            {{ phone }}
                        </span>
                      
                    </div>
                </div>
                <div  class="aMiddleRight" >
                    <el-button type="danger" style="width: 80px;" @click="unbindingButton" v-if="phone!=''">
                        
                        <span >
                            解绑
                        </span>
                    </el-button>    
                    <el-button type="primary" style="width: 80px;" v-if="phone==''">
                        
                        <span >
                            绑定
                        </span>
                        
                    </el-button>
                    <el-button type="primary" style="width: 80px;" v-else @click="phoneChangeByEmailButton">
                        
                        <span >
                            更改
                        </span>
                        
                    </el-button>
                   
                </div>
            </div>

            <div class="as1">
                <div class="aMiddleLeft">
                    <changePasswordIconVue style="width: 30px; height: 30px;"></changePasswordIconVue>
                </div>
                <div  class="aMiddleMiddle">
                    <div class="ss1">
                        <div>修改密码</div>
                    </div>
                    <div class="ss2">
                       请牢记您的新密码
                    </div>
                </div>
                <div  class="aMiddleRight">
                    <el-button @click="passwordChangeFormOpenButton" type="primary" style="width: 80px;">修改</el-button>
                </div>
            </div>

            <div class="as1">
                <div class="aMiddleLeft">
                    <accountClosureIconVue style="width: 30px; height: 30px;"></accountClosureIconVue>
                </div>
                <div  class="aMiddleMiddle">
                    <div class="ss1">
                        <span>注销账户</span>
                    </div>
                    <div class="ss2">
                        永久删除您的帐号及相关数据，管理您的注销请求
                    </div>
                </div>
                <div  class="aMiddleRight">
                    <el-button type="danger" @click="accountClosure" style="width: 80px;">注销</el-button>
                </div>
            </div>

        </div>
        </el-card>
        
    </div>
  <!-- 遮罩层 --> 
<div v-if="emailChangeIsShow" v-show="phone.value!=''" class="overlay"></div>
<div v-if="emailChangeByEmailIsShow" class="overlay"></div>
<div v-if="unbindingPhoneFormIsShow" class="overlay"></div>
<div v-if="phoneLastFormIsShow" class="overlay"></div>
<div v-if="passwordChangeFormIsShow" class="overlay"></div>

<!-- 改邮箱通过手机号验证码（已废弃）挺好看 留吧 -->
<div style="z-index: 1001; position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;
 background-color: rgba(242, 242, 242, 0.8);" v-show="phone.value!=''" v-if="emailChangeIsShow">
    <div class="emailChangeForm" style="background-color: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);">
        <div style="height: 100%;">
            <div class="emailChangeFormTop" style="display: flex; flex-direction: column; height: 60px; justify-content: center; align-items: center;">
                <b style="font-size: 20px;">需要验证您的身份</b>
                <span style="font-size: 12px; margin-top:10px">为确认是您本人操作，请进行身份验证。</span>
            </div>
            <div class="emailChangeFormMiddle" style="height: 150px;">
                <b style="font-size: 12px;"> {{ phone }}</b>
                <div style="display: flex; flex-direction: column; margin-top: 5px;">
                    <el-input  style="border: 0;" maxlength="6"  placeholder="短信验证码">
                        <template #suffix>
                            <el-button class="tButton" color="#f2f2f2" style="font-size: 12px; color: #2d7dfd;">获取验证码</el-button>
                        </template>
                    </el-input>                                    
                     <!-- @click=""emailChangeCloseOpenButton -->
                    <el-button color="transparent"  style="margin-top:20px;"><span style="font-size: 12px; color: #2d7dfd;">选择其他验证方式</span></el-button>
                </div>
            </div>
            <div class="emailChangeFormBottom">
                <div style="display: flex; justify-content: center; align-items: center;">
                    <el-button class="bottomButton" @click="emailChangeClose"><span style="font-size: 12px; color: #2d7dfd;">取消</span></el-button>
                    <el-button class="bottomButton" @click="postClose"><span style="font-size: 12px; color:#2d7dfd;">确定</span></el-button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 改邮箱or手机通过邮箱(肯定是改手机了，因为不让改邮箱，所以只做一个功能了) -->
<div v-if="emailChangeByEmailIsShow" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex;
 justify-content: center; align-items: center; background-color: rgba(242, 242, 242, 0.8); z-index: 1000;">
    <div class="emailChangeByEmailForm" style="background-color: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);">
        <div style="height: 100%;">
            <div class="emailChangeByEmailFormTop" style="display: flex; flex-direction: column; height: 40px; justify-content: center; align-items: center;">
                <b style="font-size: 20px;">选择邮箱验证方式</b>
            </div>
            <div class="emailChangeByEmailFormMiddle" style="height: 80px;">
                <div style="display: flex; flex-direction: column; margin-top: 5px;">
                    <div>

                        <!--  -->
                        <el-button @click="phoneLastFormOpenButton" style="width: 100%; display: flex; justify-content: flex-start;">
                            <span style="font-size: 12px;">使用{{ email }}验证</span>
                        </el-button>
                    </div>
                    <div style="margin-top: 24px; display: flex; justify-content: center; align-items: center;">
                        <span style="font-size: 12px;">
                            邮件地址无法使用？
                            <a href="" style="color: #2d7dfd;">账号申诉</a>
                        </span>
                    </div>
                </div>
            </div>
            <div class="emailChangeByEmailFormBottom">
                <div style="display: flex; justify-content: center; align-items: center;">
                    <el-button class="bottomButton" @click="emailChangeByEmailClose">
                        <span style="font-size: 12px; color: #2d7dfd;">取消</span>
                    </el-button>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- 解绑手机号 -->
<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;
 background-color: rgba(242, 242, 242, 0.8); z-index: 1000;" v-if="unbindingPhoneFormIsShow" >
    <div class="unbindingPhoneForm" style="background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); width: 300px;">
        <div style="height: 100%;">
            <div class="unbindingPhoneFormTop" style="display: flex; flex-direction: column; height: 40px; justify-content: center; align-items: center;">
                <b style="font-size: 14px;">解绑后，您将不能使用原手机号登录未来蜂服务、第三方应用及服务。</b>
            </div>
            <div class="unbindingPhoneFormBottom">
                <div style="display: flex; justify-content: center; align-items: center;">
                    <el-button class="bottomButton" @click="unbindingPhoneFormClose">
                        <span style="font-size: 12px; color: #2d7dfd;">取消</span>
                    </el-button>
                    <el-button class="bottomButton" @click="unbindingPhoneFormPostClose">
                        <span style="font-size: 12px; color: red;">解绑</span>
                    </el-button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 修改手机号 -->
<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;
 background-color: rgba(242, 242, 242, 0.8) ; z-index: 1000;" v-if="phoneLastFormIsShow">
    <div class="phoneLastForm" style="background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); width: 300px;">
        <div style="height: 100%;">
            <div class="phoneLastFormTop" style="display: flex; flex-direction: column; height: 40px; justify-content: center; align-items: center;">
                <b style="font-size: 20px;">需要验证您的身份</b>
                <span style="font-size: 12px; margin-top: 12px;">为确认是您本人操作，请进行身份验证。</span>
            </div>
            <div class="phoneLastFormMiddle" style="height: 140px;">
                <div style="display: flex; flex-direction: column; margin-top: 5px;">
                    <div>
                        <el-button>
                            <span style="font-size: 12px;">{{ email }}</span>
                        </el-button>
                    </div>
                    <!-- 这里需要验证合法？ -->
                    <el-input maxlength="11" placeholder="请输入更改为的手机号"></el-input>
                    <div style="margin-top: 20px; display: flex; justify-content: center; align-items: center;">
                        <el-input style="border: 0;" maxlength="4" placeholder="邮箱验证码">
                            <template #suffix>
                                <el-button class="tButton" color="#f2f2f2" style="font-size: 12px; color: #2d7dfd;">获取验证码</el-button>
                            </template>
                        </el-input>
                    </div>
                </div>
            </div>
            <div class="phoneLastFormBottom">
                <div style="display: flex; justify-content: center; align-items: center;">
                    <el-button class="bottomButton" @click="phoneLastFormCloseButton"><span style="font-size: 12px; color: #2d7dfd;">取消</span></el-button>
                    <el-button class="bottomButton" @click="postPhoneLastFormCloseButton"><span style="font-size: 12px; color: #2d7dfd;">确定</span></el-button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 修改手机号 -->

<!-- 修改密码 -->
 <div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex;justify-content: center;
    align-items: center; background-color: rgba(242, 242, 242, 0.8); z-index: 1000;" v-if="passwordChangeFormIsShow">
        <div class="passwordChangeForm" >
            <div  style=" height: 100%;">
               <div class="passwordChangeFormTop" style="display: flex;
                flex-direction: column;height: 40px;
                justify-content: center;align-items: center;">
                    <b style="font-size: 20px; ">修改账号密码</b>
               </div>
               <div class="passwordChangeFormMiddle" style="height: 220px;">
                    <div style="display: flex; flex-direction: column; margin-top: 5px;">
                      <!--   38 -->
                      
                        <div style="margin-top:20px;display: flex;flex-direction: column;
                        justify-content: center;align-items: center;">
                        <el-input class="pms" style="margin-top:0" v-model="form.code" placeholder="输入验证码" ></el-input>
                        <el-button plain size="large" @click="sendEmail">获取验证码</el-button>
                        <el-input class="pms" style="margin-top:22px" v-model="form.newPassword1" type="password" placeholder="新密码" show-password></el-input>
                        <el-input class="pms" v-model="form.newPassword2" type="password" placeholder="再次输入新密码" show-password> </el-input>
                        </div> 
                    </div>    
               </div>
               <div class="passwordChangeFormBottom" >
                    <div style="display: flex;justify-content: center;align-items: center;" >
                        <el-button  class="bottomButton"  @click="passwordChangeFormCloseButton"><span span style="font-size: 12px; color: #2d7dfd;">取消</span></el-button>
                        <el-button  class="bottomButton"  @click="postPasswordChangeFormCloseButton"><span span style="font-size: 12px; color: #2d7dfd;">确定</span></el-button>
                    </div>
                    
               </div>
            </div>
        </div>
       
    </div>

<!-- 修改密码 -->

</template>
<script setup>
import emailIconVue from '@/components/footerIconsByLzm/lzm-icons/editPer-account/emailIcon.vue'
import {ref ,computed} from 'vue'
import phoneIconVue from '@/components/footerIconsByLzm/lzm-icons/editPer-account/phoneIcon.vue'
import changePasswordIconVue from '@/components/footerIconsByLzm/lzm-icons/editPer-account/changePasswordIcon.vue'
import accountClosureIconVue from '@/components/footerIconsByLzm/lzm-icons/editPer-account/accountClosureIcon.vue'
import router from '@/router'
import { post } from '@/plugins/axios'
import { Path } from '@/constant'
import { useUserStore } from '@/stores/pinia'
import { ElMessage } from 'element-plus'
const userStore = useUserStore()
const user = computed(() => userStore.loginUser) 
const form = ref({
    code: '',
    newPassword1: '',
    newPassword2: '',
}) 


/* 邮箱 */
const emailChangeIsShow = ref (false)
/* ByEmail */
let emailChangeByEmailIsShow = ref (false)
/* UnbindingPhone */
let unbindingPhoneFormIsShow = ref (false)
/* 修改手机号 */
let phoneLastFormIsShow = ref (false)
/*修改密码  旧密码，新密码，确认新密码 */
let passwordChangeFormIsShow = ref (false)
/* 修改密码忘记密码IsShow */
let emailVerificationCodeIsShow = ref (false)

function sendEmail(){
    post(Path.sendEmail,{
        to: user.value.email,
        state: '修改密码'
    },content => {})
}

/* 接收数据 */
const props = defineProps({
  email: {
    type: String,
    default: '2812194727@qq.com'
  },
  phone: {
    type: String,
    default: ''
  },
});

    const emit = defineEmits([
    'update:email',
    'update:phone',

    ]);
    
const email = computed({
  get: () => props.email,
  set: (value) => emit('update:email', value)
});
const phone = computed({
  get: () => props.phone,
  set: (value) => emit('update:phone', value)
});
function emailChangeClose() {
    emailChangeIsShow.value=false
  }
function emailChangeByEmailClose() {
    emailChangeByEmailIsShow.value = false;
  }
let title0 = ref("账号与安全")
/* 邮箱修改弹窗 */

const emailChangeButton = () =>{
 
        emailChangeIsShow.value=true
    }
const emailChangeCloseOpenButton = () =>{
    emailChangeIsShow.value=false
    emailChangeByEmailIsShow.value=true
}    

const phoneChangeByEmailButton = () =>{
    emailChangeByEmailIsShow.value=true
}

/* 解绑手机号 */
const unbindingButton = () =>{
    unbindingPhoneFormIsShow.value=true
}
const unbindingPhoneFormClose = () =>{
    unbindingPhoneFormIsShow.value=false
}
const unbindingPhoneFormPostClose = ()=>{
    unbindingPhoneFormClose();
    /* 提交解绑手机号 */
    emit('update:phone', '')
}

/* 修改手机号 */
const phoneLastFormOpenButton = () =>{
        emailChangeByEmailIsShow.value=false
        phoneLastFormIsShow.value=true

    }
  // 控制遮罩层显示的逻辑

  function phoneLastFormCloseButton() {
    phoneLastFormIsShow.value = false;
  }
  const postPhoneLastFormCloseButton = ()=>{
 
  }

/* 修改密码 */
    const passwordChangeFormOpenButton = () =>{
        passwordChangeFormIsShow.value=true
    }
  // 控制遮罩层显示的逻辑

  function passwordChangeFormCloseButton() {
    passwordChangeFormIsShow.value = false;
    emailVerificationCodeIsShow.value = false/* 避免下次进去 忘记密码没有恢复默认 */
  }
  const postPasswordChangeFormCloseButton = ()=>{
    if( form.value.newPassword1 !== form.value.newPassword2){
        ElMessage.warning("请确保您两次输入的密码一致！")
        return
    }
    post(Path.userFixPassword,{
        username: user.value.email,
        password: form.value.newPassword1,
        code: form.value.code
    },content => { 
        passwordChangeFormCloseButton()
        // 跳回登入首页，清除token
        document.cookie = "token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";
        router.push("/")
    })
  }
    /* 销户 */
    const accountClosure = () =>{
        router.push('/accountClosure')
    }
    const emailVerificationCodeIsShowButton = () =>{
        emailVerificationCodeIsShow.value = true
    }
</script>
<style scoped lang="scss">
*{
border:0;
padding:0;
box-sizing:border-box;

}

a {
  text-decoration: none; /* 去掉下划线 */
  color: inherit; /* 继承父元素的字体颜色 */
  background: none; /* 去掉背景颜色 */
  border: none; /* 去掉边框 */
}
.aTop{
height: 50px;
flex: 1;
}
.aMiddle{   
    height: 90%;
    margin-top:60px;
/*     border:0.667px black solid; */
    flex: 9;
    display: flex;
    flex-direction:column ;
    .as1{
        height: 70px;
        border:0.667px black solid;
        margin-top:10px;
        padding: 0 10px 0 10px;
        display: flex;
        align-items: center; /* Vertical center alignment */
        width: 100%; /* Ensure it uses full available width */
       
        .aMiddleLeft{
            flex: 0 0 10%; /* Fixed width of 10% */
        }
        .aMiddleMiddle{
            display: flex;
            flex-direction: column;
            flex: 0 0 40%; /* Fixed width of 30% */
            .ss1{
                font-size:14px;

            }
            .ss2{
                margin-top:2px;
                font-size:12px;
            }
        }
        .aMiddleRight{
            width: 100%;
             /* Pushes the right section to the far right */
             display: flex;
             justify-content: flex-end;
        }
}

}

/* 改邮箱 */
.emailChangeForm{
    z-index: 1000;
    height:318px;
    width:416px;

    padding:24px 32px;
    background-color: #ffffff;
    border-radius: 12px;
}
    .emailChangeFormMiddle{
        margin-top:24px;
        .tButton{
            background-color:#ffffff;
        }
    }
        .emailChangeFormMiddle .el-button:hover{
            background-color: transparent;
        }
   
        .bottomButton{
            background-color:#f2f2f2;
            height: 40px;
            width : 170px;
        }
        .bottomButton:hover{
            background-color:  #e5e5e5;
        }
    

::v-deep .el-input__wrapper {
background-color: #ffffff;

}
::v-deep .el-input__wrapper:hover {
background-color: #ffffff;
border: 0;
} 
/* 改邮箱ByEmail */
.emailChangeByEmailForm{
    z-index: 1000;
    height: 253px;
    width:416px;

    padding:24px 32px;
    background-color: #ffffff;
    border-radius: 12px;
    .emailChangeByEmailFormBottom{
        margin-top:20px;
    }
}
    .emailChangeByEmailFormMiddle{
        margin-top:25px;
    }
        .emailChangeByEmailFormMiddle .el-button:hover{
            background-color: #f2f2f2;
        }

/* 解绑手机号 */
.unbindingPhoneForm{
    z-index: 1000;
    height: 153px;
    width:416px;

    padding:24px 32px;
    background-color: #ffffff;
    border-radius: 12px;
    .unbindingPhoneFormBottom{
        margin-top:20px;
    }
}
/* 修改手机号 */
.phoneLastForm{
    z-index: 1000;
    height: 288px;
    width:416px;

    padding:24px 32px;
    background-color: #ffffff;
    border-radius: 12px;
    .phoneLastFormBottom{
        margin-top:10px;
    }
}
    .phoneLastFormMiddle{
        margin-top:16px;
        .tButton{
            background-color:#ffffff;
        }
    }
        .phoneLastFormMiddle .el-button:hover{
            background-color: transparent;
        }

/* 修改密码 */
.passwordChangeForm{
    z-index: 1000;
    height:350px;
    width:416px;

    padding:24px 32px;
    background-color: #ffffff;
    border-radius: 12px;
    .passwordChangeFormBottom{
        margin-top:20px;
    }
}
    .passwordChangeFormMiddle{
        margin-top:-12px;
        .pms{
            margin-top:18px;
        }
        .tButton{
            background-color:#ffffff;
        }
        ::v-deep .el-input__wrapper {
            background-color: #f2f2f2;

            }
            ::v-deep .el-input__wrapper:hover {
            background-color: #f2f2f2;
            border: 0;
            } 
    }
        .passwordChangeFormMiddle .el-button:hover{
            background-color: transparent;
        }

/* 遮罩层 */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    opacity: 0.5; /* 调整遮罩层的透明度 */
    z-index: 999; /* 确保遮罩层在最上层 */
  } 
</style>
